import React, { PureComponent, Fragment } from 'react';
import PropTypes from 'prop-types';
import { routerRedux, Route } from 'dva/router';
import Debounce from 'lodash-decorators/debounce';
import Bind from 'lodash-decorators/bind';
import { connect } from 'dva';
import {
    Table,
    Icon,
    Divider,
    Form,
    Select,
    DatePicker,
    Input,
    Card,
    Tag,
    Avatar,
    Menu,
    Checkbox,
    Rate,
    Progress,
    Button,
    message,
    Row,
    Col,
    Modal,
    Collapse,
    List,
    Radio,
    InputNumber,
    Switch,
    Tooltip
} from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import DealerProductDetails from '../../components/Falcon/DealerProductDetails';
import ProductEditor from '../../components/Falcon/ProductEditor';
import { Link } from 'react-router-dom';
import styles from './StructureMaintenance.less';

import querystring from 'querystring';
import { runInThisContext } from 'vm';
import { join } from 'path';

const Panel = Collapse.Panel;
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const { TextArea } = Input;
const ButtonGroup = Button.Group;
const confirm = Modal.confirm;

const assignType = ["自动", "手动"];
const autoAssign = ["排队模式", "规则模式"];

@connect(({ system, risk }) => ({
    system, risk
}))
@Form.create()
export default class TaskDispatch extends PureComponent {

    state = {
        assignedVisible: false,
        assignedList: null,
        assignedDetails: null,
    }

    componentDidMount() {
        const { dispatch } = this.props;
        dispatch({
            type: 'risk/getTaskList',
            payload: {
                offset: 0,
                limit: 10,
                taskState: 0,
            },
        });
    }

    columns = [
        // { title: '业务编号', dataIndex: 'nodeId', key: 'nodeId' },
        { title: '任务信息', dataIndex: 'custName', key: 'custName' },
        { title: '任务名', dataIndex: 'taskName', key: 'taskName' },
        {
            title: '操作', dataIndex: 'id', key: 'id',
            render: (text, record) => (
                <Fragment>
                    <a onClick={() => this.handleAssigned(record)}>分派</a>
                </Fragment>
            ),
        },
    ];

    columnsAssigned = [{
        title: '姓名',
        dataIndex: 'name',
        key: 'name',
    },
    {
        title: '岗位',
        dataIndex: 'roleName',
        key: 'roleName',
    },]

    handleAssigned = (record) => {
        const { dispatch } = this.props;
        dispatch({
            type: 'system/selectAssignor',
            payload: {
                taskId: record.taskId
            },
            callback: () => {
                this.setState({
                    assignedList: record,
                    assignedVisible: true,
                })
            }
        });
    }

    handleAssignedCancel = () => {
        this.setState({
            assignedVisible: false
        })
    }

    handleAssignedOK = () => {
        const { dispatch } = this.props;
        dispatch({
            type: 'system/systemCommitAssign',
            payload: {
                taskId: this.state.assignedList.taskId,
                operator: this.state.assignedDetails.userId
            },
            callback: () => {
                const { system: { systemResult } } = this.props;
                if (systemResult.code == 200) {
                    message.success("提交成功")
                    dispatch({
                        type: 'risk/getTaskList',
                        payload: {
                            offset: 0,
                            limit: 10,
                            taskState: 0,
                        },
                    });
                    this.setState({
                        assignedVisible: false
                    })
                } else {
                    message.error(systemResult.message)
                }
            }
        })
    }

    handleCustomerSelect = record => {
        this.setState({
            assignedDetails: record,
        });
    };

    render() {
        const { system: { systemLoading, systemAssignorList, userLoading } } = this.props;
        const { risk: { riskTaskList, riskPage, riskLoading } } = this.props;

        const rowSelection = {
            type: 'radio',
            onSelect: this.handleCustomerSelect,
        };

        return (
            <PageHeaderLayout title="任务分派">
                {/* {JSON.stringify(riskTaskList)} */}
                <Card bordered={false}>
                    <div className={styles.tableList}>

                        <Table
                            columns={this.columns}
                            dataSource={riskTaskList}
                            rowKey="id"
                            pagination={riskPage}
                            loading={riskLoading}
                        >
                        </Table>
                    </div>
                </Card>

                <Modal
                    title="人员指派"
                    visible={this.state.assignedVisible}
                    onCancel={this.handleAssignedCancel}
                    onOk={this.handleAssignedOK}
                    confirmLoading={userLoading}
                >
                    <Table
                        style={{ marginTop: '10px' }}
                        size="small"
                        rowKey="id"
                        columns={this.columnsAssigned}
                        // pagination={customerPage}
                        loading={userLoading}
                        rowSelection={rowSelection}
                        dataSource={systemAssignorList}
                        // onChange={this.handleStandardTableChange}
                    />
                </Modal>
            </PageHeaderLayout>
        );
    }

}
